﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>互动</title>
    <link href="source/plugin/zhibo/static/app/style/reset_css.css" rel="stylesheet"/>
    <link href="source/plugin/zhibo/static/app/style/swiper.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="source/plugin/zhibo/static/app/style/font/iconfont.css">
    <link href="source/plugin/zhibo/static/app/style/all.css" rel="stylesheet"/>
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="blank"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">


</head>
<body>
<div id="loading">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>


<div class="page-group">

    <div class="maincontent">


        <div id="VideoWindow">
            <h2><i class="iconfont icon-unfold"></i>新升阳新品发布会 </h2>

            <div class="count">
                <!--<span><i class="iconfont icon-yanjing"></i> 3333 </span>-->
                <span class="total_zan"><i class="iconfont icon-appreciate"></i> {$getData[0]['star']} </span>
            </div>
            <div class="VideoFloatFn">
                <a href="#"><i class="iconfont icon-bofang"></i> </a>
                <a href="#"><i class="iconfont icon-appreciate"></i> </a>
                <a href="#" class="btn_fullscreen"><i class="iconfont icon-fullscreen"></i> </a>
            </div>



            <div id="id_video_container_9896587163619714678" style="width:100%;height:230px;"  class="videopic"></div>
			<script src="http://qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script>
			 <script type="text/javascript">
			            (function(){
			               var option ={"channel_id":"9896587163619714678","app_id":"1251022106","width":"100%","height":"350"};
			               new qcVideo.Player(
			                       /*代码中的id_video_container将会作为播放器放置的容器使用,可自行替换*/
			                       "id_video_container_9896587163619714678",
			                       option
			                   );
			             })()
			 </script>

        </div>
        <!-- VideoWindow结束 -->


        <ul class="Tab" id="InteractionTab">
            <li class="change">直播互动</li>
            <li>节目介绍</li>
        </ul>

        <div id="Interaction" class="Tab_nr">


        </div>
        <!-- Interaction结束 -->

        <section id="introduce" class="Tab_nr">


            <h1 class="introduceTitle">新升阳新品发布会 </h1>
            <span class="livetime">直播： 2016/11/09 18:30——2016/11/10 20:30 </span>

            <div class="content">
                <!-- 文章内容开始 -->
                <p>新华社北京6月29日电(记者白瑞雪、赵薇、田兆运)结束13天太空飞行返回
                    地球的航天员景海鹏、刘旺、刘洋，29日16时回到位于北京航天城内的航天员公
                    寓。航天员系统总指挥陈善广表示，目前三位航天员身体状况良好</p>

                <p> 昨日，西湖警方发布协查通告：6月30日凌晨两点，西溪路一休闲店内发生凶杀案，一女子
                    被杀，警方初步确定凶手为男性，身高1米65左右，体型中等，穿黑色短T恤，身上可能
                    有血迹，可能往保俶路逃跑，如有市民发现可疑人员，请与警方联系。对提供有价值线
                    索协助警方破案者，将奖励一万元</p>
                <img src="images/videopic2.jpg" alt="description "/>
                <!-- 文章内容结束 -->
            </div>

        </section>
        <!-- introduce结束 -->


    </div>
    <!-- .maincontent结束 -->

    <div id="PingLun">
        <div id="giftList">
            <ul>
                <li data-name="闪电水壶1" data-price="10"><a href="#"><span class="icongift_ icongift_1x1"></span> 水壶</a>
                </li>
                <li data-name="闪电水壶2" data-price="20"><a href="#"><span class="icongift_ icongift_2x1"></span> 工具箱</a>
                </li>
                <li data-name="闪电水壶3" data-price="30"><a href="#"><span class="icongift_ icongift_3x1"></span> 头盔</a>
                </li>
                <li data-name="闪电水壶4" data-price="40"><a href="#"><span class="icongift_ icongift_4x1"></span> 车架</a>
                </li>
                <li data-name="闪电水壶5" data-price="50"><a href="#"><span class="icongift_ icongift_5x1"></span> 整车</a>
                </li>
            </ul>
        </div>
        <!-- giftList结束 -->

        <div class="form" >
            <input name="content" id="content" type="text" class="text" placeholder="发送弹幕"/>
            <!--<a href="JavaScript:void(0)" ><i class="iconfont icon-appreciate" onclick="zan()"></i></a>-->
            <a href="JavaScript:void(0)" class="btn_gift"><i class="iconfont icon-liwu"></i></a>
            <button class="btn_send" onclick="add()">发送</button>
        </div>
    </div>
    <!-- PingLun结束 -->

    <span id="giftsend_zz"></span>
    <section id="giftsend">
        <div class="giftsend_box">
            <div class="photo">
			<span class="icongift_ icongift_1x1"></span>
            </div>
            <h4><strong>闪电水壶</strong> <em class="em222">（2 OL币） </em></h4>
            <textarea name="textarea" id="gift_ly" cols="" rows="4"> </textarea>
        </div>
        <dl>
            <dt> 批量赠送：</dt>
            <dd>
                <ul class="sl_select">
                    <li class="change">1</li>
                    <li>66</li>
                    <li>520</li>
                    <li>666</li>
                    <li>1314</li>
                </ul>
            </dd>
        </dl>
        <!--<p class="tips">可用OL币：100个<a href="#"> 充值 </a></p>-->
        <p class="tips">可用OL币：<span class="abc">{$credit}</span>个<a href="#"> 充值 </a></p>
        <button class="btn_send" onclick="giveTouch()">赠 送</button>

    </section>
    <!-- giftsend结束 -->


</div>
<!-- .page-group结束 -->


<script src="source/plugin/zhibo/static/app/js/jquery.js"></script>
<script src="source/plugin/zhibo/static/app/js/swiper.min.js"></script>
<script src="source/plugin/zhibo/static/app/style/font/iconfont.js"></script>
<script src="source/plugin/zhibo/static/app/js/load2.js"></script>

<script>
    function zan() {
        var a = $(".total_zan").text();
        var b = parseInt(a)+1;
        $(".total_zan").html('<i class="iconfont icon-appreciate"></i>'+b);

        $.ajax({
            type: "POST",
            url : 'plugin.php?id=zhibo&ac=activity&op=zan&identify={$data}',
            dataType : "json",
        });
    }

</script>

<script>
    contentlist();
    function add() {
        if (!{$_G['uid']}) {
            alert('请先登录');
            document.location.href = 'member.php?mod=logging&action=login';
        } else {

            var content = $("#content").val();
            if (content.trim() == '') {
                document.getElementById("content").placeholder = "请输入评论";
                return;
            }
            $.ajax({
                type: "POST",
                url: "http://bikeshopadmin.olbike.com/V3/?service=Danmaku.Add",
                data: {
                    "uid": {$_G['uid']},
                    "username": "{$_G['username']}",
                    "channelId": 42,
                    "content": content
                },
                dataType: "json",
                success: function (msg) {
                    console.log(msg);
                    var data = msg.data;
                    if (data) {
                        var str = '<div class="ChatRecord" data-comment-id=' + data.id + '>';
                        str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data.uid + '&size=small" alt="description" /></div>';
                        str += '  <div class="Record_nr">';
                        str += '  <span class="user_name">' + data.username + ' </span>';
                        str += '  <p>' + data.content + ' </p>';
                        str += ' <span class="floor_name">' + data.id + 'F </span>';
                        str += ' </div>';
                        str += '<span class="arrow2"></span>';
                        str += '</div>';

                        //评论每次向头部提交
                        $('#Interaction').prepend(str);
                        $("#content").val('');
                    } else {
                        alert("添加失败！");
                    }
                }
            });
        }
    }

    //更新评论内容
    setInterval("getnewcomment()", 1000);
    function getnewcomment() {
        var zid = $("#Interaction .ChatRecord:first-child").attr('data-comment-id');
        $.ajax({
            type: "POST",
            url: "http://bikeshopadmin.olbike.com/V3/?service=Danmaku.getNewContentList",
            data: {
                "id": zid,
                "channelId": 42
            },
            dateType: "json",
            success: function (msg) {
                var data = msg.data;
                if (data.imageSrc && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].imageSrc) {
                            var str = '<div class="ChatRecord" data-comment-id=' + data[i].id + '>';
                            str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data[i].uid + '&size=small" alt="description" /></div>';
                            str += '<div class="Record_nr">';
                            str += '<span class="user_name">' + data[i].username + ' </span>';
//                            str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<img style="width:37px;height:40px;margin: 0 5px;" src=' + data[i].imageSrc + ' alt="description" />' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data[i].number+'</span>'+ data[i].content + ' </p>';
                            str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<span class="icongift_ '+data[i].imageSrc+'" style="width: 37px;height: 40px;"></span>' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data[i].number+'</span>'+ data[i].content + ' </p>';

                            str += '<span class="floor_name">' + data[i].id + 'F </span>';
                            str += '</div>';
                            str += '<span class="arrow2"></span>';
                            str += '</div>';
                            $("#Interaction").prepend(str);
                        } else {
                            var str = '<div class="ChatRecord" data-comment-id=' + data[i].id + '>';
                            str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data[i].uid + '&size=small" alt="description" /></div>';
                            str += '<div class="Record_nr">';
                            str += '<span class="user_name">' + data[i].username + ' </span>';
                            str += '<p>' + data[i].content + ' </p>';
                            str += '<span class="floor_name">' + data[i].id + 'F </span>';
                            str += '</div>';
                            str += '<span class="arrow2"></span>';
                            str += '</div>';
                            $("#Interaction").prepend(str);
                        }
                    }
                }
//                if (obj.length > 0) {
//                    for (var i = 0; i < obj.length; i++) {
//                        var str = '<div class="ChatRecord" data-comment-id=' + obj[i].id + '>';
//                        str += '  <div class="photo"><img src="https://id.olbike.com/member/avatar.php?uid=' + obj[i].uid + '&size=small" alt="description" /></div>';
//                        str += '  <div class="Record_nr">';
//                        str += '  <span class="user_name">' + obj[i].username + ' </span>';
//                        str += '  <p>' + obj[i].content + ' </p>';
//                        str += ' <span class="floor_name">' + obj[i].id + 'F </span>';
//                        str += ' </div>';
//                        str += '<span class="arrow2"></span>';
//                        str += '</div>';
//
//                        $("#Interaction").prepend(str);
//                    }
//                }
            }
        });
    }

    //内容列表
    function contentlist() {
        var zid = $("#Interaction .ChatRecord:first-child").attr('data-comment-id');
        $.ajax({
            type: "POST",
            url: "http://bikeshopadmin.olbike.com/V3/?service=Danmaku.ContentList",
            data: {
                "channelId": 42
            },
            dataType: "json",
            success: function (msg) {
                var data = msg.data;
                var content = $("#Interaction");
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].imageSrc) {
                            var str = '<div class="ChatRecord" data-comment-id=' + data[i].id + '>';
                            str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data[i].uid + '&size=small" alt="description" /></div>';
                            str += '<div class="Record_nr">';
                            str += '<span class="user_name">' + data[i].username + ' </span>';
//                            str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<img style="width:37px;height:40px;margin: 0 5px;" src=' + data[i].imageSrc + ' alt="description" />' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data[i].number+'</span>'+ data[i].content + ' </p>';
                            str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<span class="icongift_ '+data[i].imageSrc+'" style="width: 37px;height: 40px;"></span>' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data[i].number+'</span>'+ data[i].content + ' </p>';

                            str += '<span class="floor_name">' + data[i].id + 'F </span>';
                            str += '</div>';
                            str += '<span class="arrow2"></span>';
                            str += '</div>';
                            content.prepend(str);
                        }
                        else {
                            var str = '<div class="ChatRecord" data-comment-id=' + data[i].id + '>';
                            str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data[i].uid + '&size=small" alt="description" /></div>';
                            str += '<div class="Record_nr">';
                            str += '<span class="user_name">' + data[i].username + ' </span>';
                            str += '<p>' + data[i].content + ' </p>';
                            str += '<span class="floor_name">' + data[i].id + 'F </span>';
                            str += '</div>';
                            str += '<span class="arrow2"></span>';
                            str += '</div>';

                            content.prepend(str);
                        }
                    }
                }
//                console.log(list);
//                var content = $("#Interaction");
//                if (list.length > 0) {
//                    for (var i = 0; i < list.length; i++) {
//                        var str = '<div class="ChatRecord" data-comment-id=' + list[i].id + '>';
//                        str += '  <div class="photo"><img src="https://id.olbike.com/member/avatar.php?uid=' + list[i].uid + '&size=small" alt="description" /></div>';
//                        str += '  <div class="Record_nr">';
//                        str += '  <span class="user_name">' + list[i].username + ' </span>';
//                        str += '  <p>' + list[i].content + ' </p>';
//                        str += ' <span class="floor_name">' + list[i].id + 'F </span>';
//                        str += ' </div>';
//                        str += '<span class="arrow2"></span>';
//                        str += '</div>';
//
//                        content.prepend(str);
//                    }
//                }
            }
        });
    }

    //送礼功能
    function giveTouch() {
        console.log({$_G['uid']});
        var price = $(".em222").attr('data-price');//获取价钱
        var imgSrc = $("#giftList ul li.change a span").attr('class'); //获取图片地址
        var number = $(".sl_select >.change").text();//获取数量
        var a = new Object();
//        icongift_ icongift_2x1

        a['img'] = imgSrc.substr(10);
        a['number'] = number;
        console.log(a);
        if ((price * number) > {$credit}) {
            alert('赠送失败,积分不足,点击获取')
        } else {
            var d = $(".abc").text();
            b = d - (price * number);
            $.post("http://192.168.1.107/php/bikeshop/V3/?service=Credit.Edit",{ uid: {$_G['uid']}, count: b });
            $(".abc").text(b);

            var content = $("#gift_ly").val();
            if (content.trim() == '') {
                document.getElementById("gift_ly").placeholder = "请输入评论";
                return;
            }
            $.ajax({
                type: "POST",
                url: "http://bikeshopadmin.olbike.com/V3/?service=Danmaku.Add",
                data: {
                    "uid": {$_G['uid']},
                    "username": "{$_G['username']}",
                    "channelId": 42,
                    "content": content,
                    'gift': JSON.stringify(a)
                },
                dataType: "json",
                success: function (msg) {
                    var data = msg.data;
                    console.log(data.imageSrc);
                    if (data.imageSrc) {
                        var str = '<div class="ChatRecord" data-comment-id=' + data.id + '>';
                        str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data.uid + '&size=small" alt="description" /></div>';
                        str += '<div class="Record_nr">';
                        str += '<span class="user_name">' + data.username + ' </span>';
//                        str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<img style="width:37px;height:40px;margin: 0 5px;" src=' + data.imageSrc + ' alt="description" />' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data.number+'</span>'+ data.content + ' </p>';
                        str += '<p><img style="width:20px;height:20px;" src="source/plugin/zhibo/static/images/song.png">' + '<span class="icongift_ '+data.imageSrc+'" style="width:37px;height:40px;"></span>' + 'x' +'<span style="font-size:10px;padding:1% 2%;">'+data.number+'</span>'+ data.content + ' </p>';
                        str += '<span class="floor_name">' + data.id + 'F</span>';
                        str += '</div>';
                        str += '<span class="arrow2"></span>';
                        str += '</div>';

                        //评论每次向头部提交
                        $('#Interaction').prepend(str);
                        $("#content").val('');
                    } else {
                        var str = '<div class="ChatRecord" data-comment-id=' + data.id + '>';
                        str += '<div class="photo"><img src="http://www.olbike.com/uc_server/avatar.php?uid=' + data.uid + '&size=small" alt="description" /></div>';
                        str += '<div class="Record_nr">';
                        str += '<span class="user_name">' + data.username + ' </span>';
                        str += '<p>' + data.content + ' </p>';
                        str += '<span class="floor_name">' + data.id + 'F </span>';
                        str += '</div>';
                        str += '<span class="arrow2"></span>';
                        str += '</div>';

                        //评论每次向头部提交
                        $('#Interaction').prepend(str);
                        $("#content").val('');
                    }
                },

            });
        }
    }
</script>


</body>
</html>



